<template>
    <el-empty v-if="props.list.length === 0" />
    <el-card
      v-else
      v-for="(item, index) in props.list"
      :key="index"
      shadow="never"
      class="card-container"
    >
      <template #header>
        <div class="card-header">
          <div>
            <span>
              <span class="card-title">{{ item.title }}</span>
              <el-tag
                v-if="item.extra"
                :type="item.status"
                effect="plain"
                size="small"
                >{{ item.extra }}</el-tag
              >
            </span>
            <div class="card-time">{{ item.datetime }}</div>
          </div>
          <div v-if="item.avatar" class="card-avatar">
            <img :src="item.avatar" width="34" />
          </div>
        </div>
      </template>
      <div class="card-body">
        {{ item.description ?? "No Data" }}
      </div>
    </el-card>
  </template>

<script lang="ts" setup>
import { type ListItem } from "./data";

interface Props {
  list: ListItem[];
}

const props = defineProps<Props>();
</script>

<style lang="scss" scoped>
.card-container {
  margin-bottom: 10px;
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .card-title {
      font-weight: bold;
      margin-right: 10px;
    }
    .card-time {
      font-size: 12px;
      color: grey;
    }
    .card-avatar {
      display: flex;
      align-items: center;
    }
  }
  .card-body {
    font-size: 12px;
  }
}
</style>
